<!--
 * @Author: coocase
 * @Date: 2021-03-14 14:56:44
 * @LastEditTime: 2021-05-13 13:18:34
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\pages\index\banner.vue
-->

<template>
    <div>
        <Menu mode="horizontal" theme="light">
            <Row>
                <Col class="menu-button" flex="200px">
                    <Dropdown theme="dark" class="index-drop">
                        <a class="droplink" href="javascript:void(0)">
                            全部商品分类
                        </a>
                        <DropdownMenu class="banner-dropmenu" slot="list">
                            <Dropdown
                                class="fir-menu"
                                v-for="item in menudata"
                                :key="item.id"
                                placement="right-start"
                            >
                                <DropdownItem>
                                    {{ item.itemType }}
                                    <Icon type="ios-arrow-forward"></Icon>
                                </DropdownItem>
                                <DropdownMenu slot="list">
                                    <DropdownItem
                                        class="sec-menu"
                                        v-for="child of item.children"
                                        :key="child.itemId"
                                        >{{ child.itemType }}</DropdownItem
                                    >
                                </DropdownMenu>
                            </Dropdown>
                        </DropdownMenu>
                    </Dropdown>
                </Col>
                <Col flex="auto">
                    <MenuItem
                        v-for="item in menudata"
                        :key="item.id"
                        :name="item.id"
                    >
                        {{ item.itemType }}
                    </MenuItem>
                </Col>
            </Row>
            <Carousel class="carousal" loop>
                <CarouselItem
                    v-for="item of bannerData"
                    :style="{ 'background-color': item.imgUrl }"
                    :key="item.id"
                    @click.native="$toDetail(item.itemName)"
                    class="banner-carousal"
                >
                    <div class="carousal-item" >{{ item.itemName }}</div>
                </CarouselItem>
            </Carousel>
        </Menu>
    </div>
</template>

<script>
export default {
    name: "Banner",
    data() {
        return {
            menudata: this.menudata,
            bannerData: this.bannerData,
        };
    },
    methods: {
        getmenu: function () {
            this.$http
                .getRequest({
                    api: "indexMenu",
                    data: {},
                })
                .then((res) => {
                    //解析对象为字符串，在解析字符串为json  JSON.parse(JSON.stringify(res.data))
                    this.menudata = res.data;
                    //  console.log(res.data);
                })
                .catch((err) => {
                    console.log(err);
                });

            // this.$axios.get('/index/manu').then((res) => {

            // this.menudata =JSON.parse(JSON.stringify(res.data.data))

            // }).catch((err) => {
            // console.log(err)
            // });
        },
        getBanner: function () {
            this.$http
                .getRequest({
                    api: "indexBanner",
                    data: {},
                })
                .then((res) => {
                    this.bannerData = JSON.parse(JSON.stringify(res.banner));
                    //  console.log(this.bannerData);
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    },
    mounted: function () {
        this.getmenu();
        this.getBanner();
    },
};
</script>

<style scoped>
.index-drop {
    display: inline-block;
    width: 200px;
    display: flex;
    justify-content: center;
    background-color: rgb(51, 49, 49);
}
.droplink {
    color: #fff;
    font-size: 18px;
}
.ivu-col .ivu-menu-item {
    font-size: 16px;
}
.fir-menu .ivu-dropdown-item {
    font-size: 16px !important;
    display: flex;
    justify-content: space-between;
}
.banner-carousal:hover{
    cursor: pointer;
}
.carousal-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    font-size: 50px;
    color: #fff;
}
</style>